<template>
  <div class="login-wrap">
    <div class="snow-container">
      <div class="snow foreground"></div>
      <div class="snow foreground layered"></div>
      <div class="snow middleground"></div>
      <div class="snow middleground layered"></div>
      <div class="snow background"></div>
      <div class="snow background layered"></div>
    </div>
    <div id="login-box">
      <div class="login-bg">
        <h2>oneDay花坊后台登录</h2>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="login-ruleForm">
          <el-form-item label="账号" prop="age">
            <el-input v-model="ruleForm.age" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
export default {
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("账号不能为空"));
      }
      callback();
      //   setTimeout(() => {
      //     if (!/^1[34578]\d{9}$/.test(value)) {
      //       callback(new Error("请输入手机号"));
      //     } else {
      //       callback();
      //     }
      //   }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        pass: "",
        age: ""
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        age: [{ validator: checkAge, trigger: "blur" }]
      }
    };
  },
  mounted() {
    $(".login-wrap").height($(window).height());
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          window.router.push({ path: '/Home' }) //  跳转路由
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};

</script>
<style>
@import url("../assets/css/snow.css");
.login-wrap {
  font-family: "Open Sans", sans-serif;
  width: 100%;
  text-transform: uppercase;
  background: #fff;
  background: url("../assets/img/1.jpg") no-repeat center center;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  text-align: center;
  position: relative;
}

.snow-container {
  height: inherit;
}

#login-box {
  width: 100%;
  position: absolute;
  top: 10%;
  left: 0;
}

.login-bg {
  width: 480px;
  height: 380px;
  background-color: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  margin: 5% auto;
}

.login-bg h2 {
  width: 480px;
  position: absolute;
  top: 23%;
  font: 24px/24px "微软雅黑";
  color: #fff;
  text-align: center;
  font-weight: 900;
}

.login-ruleForm {
  width: 400px;
  margin-top: 25%;
}

.login-ruleForm .el-form-item__label {
  color: #fff;
}

.login-ruleForm .el-button--primary {
  margin-top: 30px;
  width: 300px;
}

</style>
